<script lang="ts" setup>
import ComReqForm from './ReqForm.vue'
import ComResponse from './Response.vue'
import ComExecLog from './ExecLog.vue'
import { onMounted, ref,computed } from 'vue';
import { useRoute } from 'vue-router';
import { apiAPI } from '../../api';
import { KeyValues } from '../../utils/types';

const route = useRoute();
const props = defineProps<{
  apiId?: string
}>()

let resData = {
  executionLog: []
}
const submitted = (form: KeyValues)=>{
  apiAPI.test(form)
  .then(res => {
    resData = res.data 
  })

}
const id = computed(()=>{
  return  props.apiId? props.apiId: route.params.apiId
})
</script>

<template>
  <div class="page-test">
    <ComReqForm :apiId="id" @submitted="submitted" />
    <ElTabs>
      <ElTabPane label="请求响应">
        <ComResponse :resData ="resData"/>
      </ElTabPane>
      <ElTabPane label="执行日志">
        <ComExecLog :logs="resData.executionLog" />
      </ElTabPane>
    </ElTabs>
  </div>
</template>

<style lang="scss">
.page-test {
  padding: $page-padding;
  background-color: #fff;
}
</style>
